<!--缺陷轮播图-->
<template>
    <div class='container'>
        <div class="tit-div">典型缺陷图</div>
        <div class="img-container">
            <el-carousel :height="carouselHeight" indicator-position="outside" arrow="never" :autoplay="true"
                :interval="2000">
                <el-carousel-item v-for="item in defectImgList" :key="item.name">
                    <img :src="item.img" fit="fill">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>
import defect1 from "@/assets/img/1.jpg";
import defect2 from "@/assets/img/2.jpg";
import defect3 from "@/assets/img/3.jpg";
export default {
    data() {
        return {
            //缺陷图片列表
            defectImgList: [
                { img: defect1, name: "缺陷1" },
                { img: defect2, name: "缺陷2" },
                { img: defect3, name: "缺陷3" },
            ],
            imgList: [defect1, defect2, defect3],
            swiperObj: null,
            carouselHeight: "0px",//走马灯高度
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        createSwiper() {
            let dom = document.getElementsByClassName("img-container")[0];
            let domHeight = dom.clientHeight;
            this.carouselHeight = domHeight - 10 + "px";
        }
    },
};
</script>
<style scoped lang='scss'>
::v-deep .swiper-pagination-bullet {
    background-color: #fff;
}

.container {
    height: 100%;
    width: 95%;
    margin: auto;

    .tit-div {
        position: absolute;
        z-index: 1000;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0%);
        font-weight: 900;
        font-size: 20px;
        color: #fff;
        -webkit-text-stroke: .5px rgb(0, 0, 0)
    }

    .img-container {
        width: 100%;
        height: 100%;
        img{
            height: 100%;
            width: 100%;
        }
    }

}
</style>